<template>
  <div class="comment-item">
  <!-- 评论列表 -->
  <div class="comment-list">
  	<div class="comment-title">相关点评 (Discuss)
      <p class="view-num">{{viewNum}}人浏览过</p>
    </div>
    <div v-for="item in commentList" :key="item.id" class="user-comment-item">
      <div class="commenter-info">
      	<img :src="item.user_avatar" class="user-avatar">
      	<p class="user-name">{{String(item.user_name).slice(0,6)}}</p>
      	<p class="desc-time">{{dateFormat(item.create_time,1)}}</p>
      </div>
      <div class="comment-desc">{{item.comment}}</div>
    </div>
  </div>
  <!-- 输入评论 -->
  <div class="input-item">
    <input v-model.trim="message" @input="inputMsg" @keyup.enter="submitMsg" placeholder="我也来说两句..." class="comment-input" maxlength="60">
    <button class="comment-send" @click="submitMsg">发送</button>
  </div>
  </div>
</template>

<script>
import * as util from '@/util/util'
export default {
  data () {
    return {
      commentList: [],
      message: '',
      viewNum: 1
    }
  },
  methods: {
    async getViewNum () {
      let viewNum = await util.requestApi('/thai/api/v1/get_store_view_num', 'get', `?storeId=${this.$route.query.store_id}`)
      this.viewNum = (viewNum.count + 50) * 3 + 1
    },
    //  提交评论
    async submitMsg () {
      // console.log(this.message)
      if (this.message) {
        let param = {
          storeId: this.$route.query.store_id,
          userName: '匿名用户',
          userAvatar: `http://ozkhmokea.bkt.clouddn.com/header_0${parseInt(Math.random() * 4) + 1}.jpeg`,
          comment: this.message
        }
        let res = await util.requestApi('/thai/api/v1/submit_user_comment', 'post', ``, param)
        // console.log('commentId => ', res)

        this.commentList.unshift({
          id: res,
          user_name: param.userName,
          user_avatar: param.userAvatar,
          comment: param.comment,
          create_time: Date.now()
        })

        this.message = ''
      }
    },
    // 敏感词语筛选
    inputMsg (msg) {
      console.log(msg.data) //
    },
    async getCommentList () {
      const res = await util.requestApi('/thai/api/v1/get_store_comment_list', 'get', `?storeId=${this.$route.query.store_id}`)
      this.commentList = res
    },
    // 时间转换
    dateFormat (t, code) {
      return util.dateFormat(t, code)
    }
  },
  created () {
    this.getViewNum()
  },
  mounted () {
    // console.log(+this.$props.storeId)
    this.getCommentList()
  }
}
</script>

<style scoped>
.comment-list{
  margin-bottom: 36px;
}
.comment-title{
  height:32px;
  line-height:32px; 
  padding-left: 15px;
  color: #333;
  font-weight: bold;
  font-size: 16px;
  border-bottom:solid 1px #eee;
}
.user-comment-item{
  padding:5px 15px;
}
.commenter-info{
  height:30px;
}

.comment-desc{
  line-height: 28px;
  word-break: break-all;
  background-color: #fff;
  border-radius: 6px;
  color: #803a23;
  font-weight: bold;
}

.user-avatar{
  width:30px;
  height: 30px;
  border-radius: 100%;
  float: left;
  display: inline-block;
  margin-right: 10px;
}
.user-name{
  float: left;
  display: inline-block;
  line-height: 30px;
}
.desc-time{
  float: right;
  display: inline-block;
  line-height: 30px;
}
.input-item{
  position: fixed;
  left: 0;
  bottom: 0;
  background-color: #fff;
  right:0;
  height:30px;
}
.comment-input{
  display: inline-block;
  float: left;
  min-width:76%;
  max-width: 78%;
  padding: 0 15px;
  line-height: 30px;
  height:30px;
  -webkit-appearance: none;
  border: none;
}
.comment-send{
 background-color: #f0f0f0;
  border: none;
  color: #803b24;
  display: inline-block;
  float: right;
  width: 12%;
  line-height: 30px;
  height: 30px;
  font-weight: bolder;
}
.view-num{
  float:right;position:relative;right:15px;font-size:12px;
}
</style>
